<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>用户列表</title>

    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
    <link href="/css/admin/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/admin/style.min.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>

    <script type="text/javascript" src="/js/admin/main.min.js"></script>
    <script type="text/javascript" src="/js/admin/multitabs.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/encode/aes/aes.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/encode/aes/core-min.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/encode/aes/cipher-core-min.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/encode/aes/mode-ecb-min.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/encode/aes/pad-zeropadding-min.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/validate.form.js"></script>
</head>
<body>
<div class="container-fluid">

    <div style="margin-top: 5px; height: 20px;"></div>

    <div class="table-responsive">
        <table class="table table-hover" style="text-align: center" aria-describedby="userTable">
            <tr>
                <th style="text-align: center">ID</th>
                <th style="text-align: center">用户名</th>
                <th style="text-align: center">收件人</th>
                <th style="text-align: center">电话</th>
                <th style="text-align: center">地址</th>
                <th style="text-align: center">操作</th>
            </tr>

            <c:forEach items="${page.list}" var="user">
                <tr>
                    <td><p>${user.id}</p></td>
                    <td><p>${user.userName}</p></td>
                    <td><p>${user.realName}</p></td>
                    <td><p>${user.phone}</p></td>
                    <td><p>${user.address}</p></td>
                    <td>
                        <c:if test="${user.roleId != 1}">
                            <button type="button" class="btn btn-primary m-r-5" data-toggle="modal"
                                    data-target="#myModal_1" onclick="resetPassword(${user.id},'${user.userName}') ">
                                <span class="mdi mdi-lock-reset" aria-hidden="true"></span>重置密码
                            </button>
                        </c:if>
                        <button type="button" class="btn btn-primary m-r-5"
                                onclick="editUser(${user.id})">
                            <span class="mdi mdi-update" aria-hidden="true"></span>修改
                        </button>

                        <c:if test="${user.roleId != 1}">
                            <button type="button" class="btn btn-danger"
                                    onclick="deleteUser(${user.id})">
                                <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                            </button>
                        </c:if>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>

    <%--重置密码模态框--%>
    <div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">重置密码</h4>
                </div>

                <div class="modal-body">
                    <form class="site-form" action="/bookmall/admin/user/reset" onsubmit="return encryptForResetPassword()" method="post" id="pwdForm">
                        <input type="hidden" name="id" id="userId" value="" />
                        <div class="form-group">
                            <label for="userName">用户名</label>
                            <input type="text" class="form-control" name="userName" id="username"
                                   disabled="disabled">
                        </div>

                        <div class="form-group">
                            <label for="userName">新密码</label>
                            <input type="password" class="form-control" name="newpassword" id="newpassword"
                                   autocomplete="off">
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div>
        <%--修改/添加模态框--%>
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document" style="margin-top: 11px;width: 520px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="modalLabel"></h4>
                    </div>

                    <div class="modal-body">
                        <form class="site-form" action="/bookmall/admin/user/edit" method="post"
                              style="height: 470px;width: 500px;">

                            <input type="hidden" name="id" id="id" />
                            <input type="hidden" name="password" />

                            <div class="form-group">
                                <label for="userName">用户名</label>
                                <input type="text" class="form-control" name="userName" id="userName"
                                       disabled="disabled"
                                       autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="example-select">角色</label>
                                <select class="form-control" id="roleId" name="roleId" size="1">
                                    <option value="">请选择</option>
                                    <option value="1">管理员</option>
                                    <option value="2">普通用户</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="realName">真实姓名</label>
                                <input type="text" class="form-control" name="realName" id="realName"
                                       autocomplete="off">
                                <small class="form-text text-muted">请保证您填写的姓名是真实可靠的。</small>
                            </div>

                            <div class="form-group">
                                <label for="phone">手机号</label>
                                <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入正确的手机号"
                                       autocomplete="off">
                                <small class="form-text text-muted">请保证您填写的手机号是正确的。</small>
                            </div>

                            <div class="form-group">
                                <label for="address">收货地址</label>
                                <textarea class="form-control" name="address" id="address" rows="2"
                                          autocomplete="off"></textarea>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <br>
    <c:choose>
        <c:when test="${!empty page.list}">
            <jsp:include page="./pagination.jsp">
                <jsp:param value="bookmall/admin/users" name="url" />
            </jsp:include>
        </c:when>

        <c:otherwise>
            <div style='text-align:center; color: #33cabb;'>暂无数据...</div>
        </c:otherwise>
    </c:choose>
    <br>
</div>

<script>

    function resetPassword(id, userName) {

        $('.modal-body').find('form').trigger('reset');

        $("#userId").val(id);
        $("#username").val(userName);
        // 显示模态框
        $('#myModal_1').modal('shown');
    }


    /**
     * 编辑用户信息
     * @param id 主键id
     */
    function editUser(id) {

        $('.modal-body').find('form').trigger('reset');

        $.get('/bookmall/admin/user/query/' + id, function (data) {

            if (data == null) {
                layer.msg("无效用户信息！", {time: 2000}, function () {
                    window.parent.parent.document.getElementById("multitabs_users").contentWindow.location.reload(true);
                });
            } else {
                $("#modalLabel").text("修改");
                $("#id").val(data.id);
                $("#userName").val(data.userName);
                $("#roleId").val(data.roleId);
                $("#phone").val(data.phone);
                $("#realName").val(data.realName);
                $("#address").val(data.address);

                // 显示模态框
                $('#myModal1').modal('show');
            }

        })
    }

    /**
     * 删除用户信息
     * @param id 主键id
     */
    function deleteUser(id) {
        layer.open({
            content: '确定要删除ID为: ' + id + '  的用户所有信息吗？',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                $.get('/bookmall/admin/user/remove/' + id, function (data) {
                    if (data) {
                        layer.msg("信息删除成功~", {time: 1500}, function () {
                            window.parent.parent.document.getElementById("multitabs_users").contentWindow.location.reload(true);
                        });
                    } else {
                        layer.msg("信息删除失败！请确认信息是否完整或联系管理员!", {time: 2000}, function () {
                            window.parent.parent.document.getElementById("multitabs_users").contentWindow.location.reload(true);
                        });
                    }
                });
            },
            btn2: function (index, layero) {
                layer.msg("已取消操作...", {icon: 2});
            },
            cancel: function () {
                layer.msg("操作已取消...", {icon: 2});
            }
        });
    }
</script>

</body>
</html>
